import React from "react";
import {Typography,Divider, Modal} from "antd";
import DictionaryAddForm from "./DictionaryAddForm";
import BaseComponent from "../../../redare/components/BaseComponent";
import DictionaryPresenter from "../../../.gen/presenter/DictionaryPresenter";
import {_changeData} from "../../../common/Utils";
import FunPermission from "../../../redare_components/webplatform_workbench/components/permission/FunPermission";
import EllipsisTooltip from "../../common/EllipsisTooltip";
import DndGrid from "../../../redare/components/grid/DndGrid";

export default class DictionaryTableComponent extends BaseComponent {

    constructor(props) {
        super(props);
        this.state = {
            confirmLoading: false,
            visible: false,
        };
        this.dicPresenter = new DictionaryPresenter(this)
    }

    componentDidMount() {
        this._findDictionaryList();
    }

    _setModalVisible(visible) {
        this.setState({visible})
    }

    _setButtonConfirmLoading(confirmLoading) {
        this.setState({confirmLoading})
    }

    //查询字典列表
    _findDictionaryList() {
        if (this.grid) {
            this.grid.showLoadingIndicator();
        }
        this.dicPresenter.findDictionaryList(
            {},
            {},
            (result) => {
                let {data} = result;
                if (data && this.grid) {
                    let changeData = _changeData(data);
                    this.grid.setData(changeData);
                    this.grid.closeLoadingIndicator()
                }
            },
            () => {
                if (this.grid) {
                    this.grid.closeLoadingIndicator();
                }
            })
    }

    //编辑
    _onEditDictionary(id, code) {
        this.setState({editObj: {isEdit: true, editId: id, parentCode: code}, visible: true});
    }

    //子字典添加
    _addSubDictionary(id, code) {
        this.setState({visible: true, parentId: id, parentCode: code, editObj: undefined})
    }

    //启用禁用
    _disableDictionary(id, disable, editStatus) {
        this.confirm("确定" + disable + "该数据字典?", () => {
            this.dicPresenter.changeDictionaryStatus({id: id, status: editStatus}, {}, () => {
                this.toastSuccess("编辑成功");
                this._findDictionaryList()
            })
        })
    }

    //删除
    _delDictionary(id) {
        this.confirm("确定删除该数据字典?", () => {
            this.dicPresenter.deleteDictionary({id: id}, {}, () => {
                this.toastSuccess("删除成功");
                this._findDictionaryList()
            })
        })
    }

    //保存
    _saveDictionary() {
        this._setButtonConfirmLoading(true);
        if (this.dictionaryForm) {
            this.dictionaryForm.formRef.current.validateFields()
                .then(value => {
                    this._save(value);
                })
                .catch(err => {
                    this._setButtonConfirmLoading(false);
                })
        }
    }

    //编辑或添加保存
    _save(value) {
        let {editObj, parentCode, parentId} = this.state;
        if (editObj && editObj.isEdit) { //编辑提交
            value.id = editObj.editId;
            this.dicPresenter.editDictionary(value, {}, () => {
                this.toastSuccess("编辑成功");
                this._findDictionaryList()
            })
        } else { //添加提交
            value.parentId = parentId;
            value.parentCode = parentCode;
            this.dicPresenter.addDictionary(value, {}, () => {
                this.toastSuccess("添加成功");
                this._findDictionaryList()
            })
        }
        this._setModalVisible(false);
        this._setButtonConfirmLoading(false)
    }

    onRowMove(dragRecord, hoverRecord) {
        if (dragRecord.children && dragRecord.children.length > 0 && !hoverRecord.children) {
            this.toastWarning("数据字典仅支持两层结构");
            return
        }
        this.dicPresenter.sortDictionaryStatus(
            {dragId: dragRecord.id, hoverId: hoverRecord.id},
            {},
            () => {
                this._findDictionaryList()
            }
        )
    }

    render() {
        let {visible, confirmLoading, editObj} = this.state;
        return (
            <div>
                <DndGrid
                    className="margin-top24"
                    ref={(o) => {
                        this.grid = o
                    }}
                    scroll={{x: 900}}
                    _initLoading={false}
                    _showPage={false}
                    bordered={false}
                    rowKey={(v) => v.id}
                    _onRowMove={(dragRecord, hoverRecord) => this.onRowMove(dragRecord, hoverRecord)}
                    columns={[
                        {
                            title: '字典名称',
                            dataIndex: 'dicName',
                            ellipsis: true,
                            render: (v) => <Typography.Paragraph className={'marginBottom0'}  copyable={{tooltips: ['复制字典名称', '复制成功']}}>{v}</Typography.Paragraph>
                        },
                        {
                            title: '字典编码',
                            dataIndex: 'dicCode',
                            ellipsis: true,
                            render: (v) => <Typography.Paragraph className={'marginBottom0'}  copyable={{tooltips: ['复制字典编码', '复制成功']}}>{v}</Typography.Paragraph>
                        },
                        {
                            title: '描述',
                            dataIndex: 'des',
                            render: (value) => <EllipsisTooltip title={value}>{value}</EllipsisTooltip>
                        },
                        {
                            title: '状态',
                            dataIndex: 'status',
                            width: 80,
                            ellipsis: true,
                            render: (text, record, index) => {
                                switch (text) {
                                    case 1:
                                        return (
                                            <span style={{color: 'green'}}>● 启用</span>
                                        );
                                    case 0:
                                        return (
                                            <span style={{color: 'red'}}>● 禁用</span>
                                        )
                                }
                            }
                        },
                        {
                            title: '操作',
                            width: 180,
                            fixed: 'right',
                            render: (text, record, index) => {
                                let {status, id} = record;
                                let editStatus = status === 0 ? 1 : 0;
                                let disable = status === 0 ? '启用' : '禁用';
                                return (
                                    <>
                                        <FunPermission funId={"DictionaryArgAdd"}>
                                            <a onClick={this._addSubDictionary.bind(this, id, record.dicCode)}>添加</a>
                                        </FunPermission>

                                        <FunPermission funId={"DictionaryArgEdit"}>
                                            <Divider type="vertical"/>
                                            <a onClick={this._onEditDictionary.bind(this, id)}>编辑</a>
                                        </FunPermission>

                                        <FunPermission funId={"DictionaryArgChange"}>
                                            <Divider type="vertical"/>
                                            <a onClick={this._disableDictionary.bind(this, id, disable, editStatus)}>{disable}</a>
                                        </FunPermission>

                                        <FunPermission funId={"DictionaryArgDel"}>
                                            <Divider type="vertical"/>
                                            <a onClick={this._delDictionary.bind(this, id)}>删除</a>
                                        </FunPermission>
                                    </>
                                )
                            }
                        },
                    ]}
                />
                <Modal
                    title="编辑字典"
                    okText="保存"
                    cancelText="取消"
                    visible={visible}
                    confirmLoading={confirmLoading}
                    onOk={this._saveDictionary.bind(this)}
                    onCancel={() => this._setModalVisible(false)}
                    centered={true}
                    destroyOnClose={true}
                    maskClosable={false}
                >
                    <DictionaryAddForm ref={(form) => this.dictionaryForm = form} editObj={editObj}/>
                </Modal>
            </div>
        )
    }


}